<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
  <link rel="stylesheet" th:href="@{/css/custom.form.css}">
    <style id="layuimini-bg-color">
    </style>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info">
  <input name="id" hidden/>
  <input type="userId" name="userId" hidden="hidden">
    <div class="layui-form-item">
      <label class="layui-form-label">投资人</label>
      <div class="layui-input-block">
        <input type="userName" id="userNameDia" name="userName" placeholder="请选择投资人" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">站点名称</label>
      <div class="layui-input-block">
        <input type="stationName" name="stationName" placeholder="请输入站点名称" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">详细地址</label>
      <div class="layui-input-block">
        <input type="address" name="address" placeholder="请输入详细地址" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">专用类型</label>
      <div class="layui-input-block">
        <input type="dedicatedType" name="dedicatedType" placeholder="请输入专用类型" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">充电速度类型</label>
      <div class="layui-input-block">
        <input type="chargingSpeedType" name="chargingSpeedType" placeholder="请输入充电速度类型" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">原价</label>
      <div class="layui-input-block">
        <input type="originalPrice" name="originalPrice" placeholder="请输入原价" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">实际价格</label>
      <div class="layui-input-block">
        <input type="price" name="price" placeholder="请输入实际价格" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">停车收费模式</label>
      <div class="layui-input-block">
        <input type="parkFee" name="parkFee" placeholder="请输入停车收费模式" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">是否有休息室</label>
      <div class="layui-input-block">
        <input type="lounge" name="lounge" placeholder="请输入是否有休息室" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">是否有卫生间</label>
      <div class="layui-input-block">
        <input type="toilet" name="toilet" placeholder="请输入是否有卫生间" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">是否有商场</label>
      <div class="layui-input-block">
        <input type="shoppingMall" name="shoppingMall" placeholder="请输入是否有商场" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">是否有洗车场</label>
      <div class="layui-input-block">
        <input type="washCar" name="washCar" placeholder="请输入是否有洗车场" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">洗车费用</label>
      <div class="layui-input-block">
        <input type="washFee" name="washFee" placeholder="请输入洗车费用" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">营业开始时间</label>
      <div class="layui-input-block">
        <input type="businessStartTime" name="businessStartTime" placeholder="请输入营业开始时间" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">营业结束时间</label>
      <div class="layui-input-block">
        <input type="businessEndTime" name="businessEndTime" placeholder="请输入营业结束时间" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">是否有饮食</label>
      <div class="layui-input-block">
        <input type="diet" name="diet" placeholder="请输入是否有饮食" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">经度</label>
      <div class="layui-input-block">
        <input type="longitude" name="longitude" placeholder="请输入经度" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">纬度</label>
      <div class="layui-input-block">
        <input type="latitude" name="latitude" placeholder="请输入纬度" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block">
        <input type="status" name="status" placeholder="请输入状态" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">录入时间</label>
      <div class="layui-input-block">
        <input type="createTime" name="createTime" placeholder="请输入录入时间" autocomplete="off" class="layui-input disabled">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>
<div id="deptTree" style="display: none"></div>
<div class="table_div">
  <div id="searchParam"  shiro:hasPermission="chargeStationInfo:list">
    <form class="layui-form ">
      <div class="layui-form-item">
        <div class="layui-input-inline">
          <label class="layui-form-label">名称</label>
          <input type="text" id="key" class="layui-input"  autocomplete="off" placeholder="请输入">
        </div>

      </div>

      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <button class="layui-btn"   id="export">导出全部</button>
      </div>
    </form>
  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container oper">
    <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="chargeStationInfo:add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="chargeStationInfo:delete">删除</button>
  </div>
</script>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="look">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="chargeStationInfo:update">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="chargeStationInfo:delete">删除</a>
</script>

</body>
</html>
<script th:inline="javascript" type="text/javascript">
  var ctx = '[[@{/}]]'.replaceAll("\"", "").replace('//', '/');
</script>
<script th:src="@{/layui/layui.all.js}"></script>
<script th:src="@{/js/core.util.js}"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;

  layui.use(['table', 'layer', 'laydate'], function () {

    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: ctx + 'chargeStationInfo/listByPage' //数据接口
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: 'id', sort: true, width: 120},
          {field: 'userName', title: '投资人', width: 100},
          {field: 'stationName', title: '站点名称', width: 250},
          {field: 'dedicatedType', title: '专用类型', width: 80, templet: function (item) {
              if (item.dedicatedType == 1) {
                return '专用';
              }
              if (item.dedicatedType == 0) {
                return '公用';
              }
            }},
          {field: 'originalPrice', title: '原价', width: 100, templet: function (item) {
              return item.originalPrice+'元/度';
            }},
          {field: 'price', title: '实际价格', width: 100, templet: function (item) {
                return item.price+'元/度';
            }},
          {field: 'businessStartTime', title: '营业开始时间', width: 150},
          {field: 'businessEndTime', title: '营业结束时间', width: 150},
          {field: 'status', title: '状态', width: 100, templet: function (item) {
              if (item.status === 0) {
                return '<span style="color: green;font-weight: bold;">运营中</span>';
              }
              if (item.status === 1) {
                return '<span style="color: #da4f49;font-weight: bold;">维修中</span>';
              }
            }},
          {field: 'createTime', title: '录入时间', width: 200},
          {width: 120, toolbar: "#tool", title: '操作', width: 200}
        ]
      ]
      , toolbar: '#toolbar'
    });


    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
        case 'add':
          toUnDisabled();
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("新增");
          setTimeout(function () {
            form.val('info', {
              "test": "test"
              , "id": ""
              , "userId": ""
              , "stationName": ""
              , "address": ""
              , "dedicatedType": ""
              , "chargingSpeedType": ""
              , "originalPrice": ""
              , "price": ""
              , "parkFee": ""
              , "lounge": ""
              , "toilet": ""
              , "shoppingMall": ""
              , "washCar": ""
              , "washFee": ""
              , "businessStartTime": ""
              , "businessEndTime": ""
              , "diet": ""
              , "longitude": ""
              , "latitude": ""
              , "status": ""
              , "createTime": ""
            });
          }, 200);
          break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'look':
          backshow(data);
          toDisabled();
          break;
        case 'edit':
          backshow(data);
          $(".title").html("编辑");
          toUnDisabled();
          break;
      }
    });
    $("#userNameDia").click(function () {
      layer.open({
        type: 1,
        skin: 'layui-layer-molv',
        title: "选择部门",
        area: ['400px', '450px'],
        shade: 0,
        shadeClose: false,
        content: jQuery("#deptTree"),
        btn: ['确定', '取消'],
        yes: function (index) {
          if (selectNode.data != null) {
            //选中回显
            $(".operation input[name=userId]").val(selectNode.data.id);
            $(".operation input[name=userName]").val(selectNode.data.title);
          }

          layer.close(index);
        }
      });
    });
    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
        key: $("#key").val()
      };
      CoreUtil.sendPost(ctx + "chargeStationInfo/listByPage", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete(ctx + "chargeStationInfo/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost(ctx + "chargeStationInfo/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut(ctx + "chargeStationInfo/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }

      return false;
    });
  });

  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
        key: $("#key").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };

  //回显
  function backshow(data) {
    $(".table_div").hide();
    $(".operation").show();
    $(".title").html("查看");
    setTimeout(function () {
      form.val('info', {
        "test": "test"
        , "id": data.id
        , "userId": data.userId
        , "stationName": data.stationName
        , "address": data.address
        , "dedicatedType": data.dedicatedType
        , "chargingSpeedType": data.chargingSpeedType
        , "originalPrice": data.originalPrice
        , "price": data.price
        , "parkFee": data.parkFee
        , "lounge": data.lounge
        , "toilet": data.toilet
        , "shoppingMall": data.shoppingMall
        , "washCar": data.washCar
        , "washFee": data.washFee
        , "businessStartTime": data.businessStartTime
        , "businessEndTime": data.businessEndTime
        , "diet": data.diet
        , "longitude": data.longitude
        , "latitude": data.latitude
        , "status": data.status
        , "createTime": data.createTime
      });
    }, 200);
  }

  //禁用输入
  function toDisabled() {
    $(".oper").hide();
    $(".disabled").each(function (index, elem) {
      $(elem).attr("disabled", "")
    })
  }

  //放开输入
  function toUnDisabled() {
    $(".oper").show();
    $(".disabled").each(function (index, elem) {
      $(elem).removeAttr("disabled", "")
    })
  }
</script>